import {
  Dropdown,
  ImageUploader,
  Input,
  TextArea,
  Form,
  DatePicker,
  Switch,
  Button,
  Selector,
} from "antd-mobile";
import React, { RefObject, useState } from "react";
import type { DatePickerRef } from "antd-mobile/es/components/date-picker";
import dayjs from "dayjs";
import "./index.scss";
import { demoSrc, mockUpload } from "./utilt";
import { useNavigate } from "react-router-dom";
import Community_Top from "components/Community_Top";
const index = () => {
  const navigate = useNavigate();
  const maxCount = 6;
  const options = [
    {
      label: "10H币",
      value: "1",
    },
    {
      label: "20H币",
      value: "2",
    },
    {
      label: "30H币",
      value: "3",
    },
    {
      label: "自定义",
      value: "4",
    },
  ];
  const [fileList, setFileList] = useState([
    {
      url: demoSrc,
    },
  ]);
  // 点击提交按钮
  const hangleButton = () => {
    navigate("/");
  };
  return (
    <div>
      {/* 头部 */}
      <Community_Top />
      <div className="main">
        <div className="main-item">
          <Form>
            <Form.Item>
              <Input placeholder="请输入标题(最多20字)" />
            </Form.Item>
          </Form>
          <Dropdown closeOnMaskClick={false} closeOnClickAway={false}>
            <Dropdown.Item key="sorter" title="请选择就诊科室">
              <ul style={{ display: "flex", flexWrap: "wrap" }}>
                <li style={{ margin: "0.5rem" }}>内科</li>
                <li style={{ margin: "0.5rem" }}>骨科</li>
                <li style={{ margin: "0.5rem" }}>眼科</li>
                <li style={{ margin: "0.5rem" }}>小儿科</li>
                <li style={{ margin: "0.5rem" }}>急诊科</li>
                <li style={{ margin: "0.5rem" }}>皮肤性病</li>
                <li style={{ margin: "0.5rem" }}>耳鼻喉科</li>
                <li style={{ margin: "0.5rem" }}>精神病科</li>
              </ul>
            </Dropdown.Item>
          </Dropdown>
          <Dropdown closeOnMaskClick={false} closeOnClickAway={false}>
            <Dropdown.Item key="sorter" title="请选择就诊科室">
              <ul style={{ display: "flex", flexWrap: "wrap" }}>
                <li style={{ margin: "0.5rem" }}>猩红热</li>
                <li style={{ margin: "0.5rem" }}>百日咳</li>
                <li style={{ margin: "0.5rem" }}>水痘</li>
                <li style={{ margin: "0.5rem" }}>风疹</li>
                <li style={{ margin: "0.5rem" }}>麻疹</li>
                <li style={{ margin: "0.5rem" }}>儿童骨髓炎</li>
                <li style={{ margin: "0.5rem" }}>小儿肾炎</li>
                <li style={{ margin: "0.5rem" }}>哮喘</li>
              </ul>
            </Dropdown.Item>
          </Dropdown>
          <TextArea
            placeholder="请输入病症详情"
            autoSize={{ minRows: 3, maxRows: 5 }}
          />
        </div>
        {/* 选择时间 */}
        <div className="mainone">
          <Form>
            <Form.Item
              name="one"
              trigger="onConfirm"
              onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                datePickerRef.current?.open();
              }}
            >
              <DatePicker>
                {(value) =>
                  value ? dayjs(value).format("YYYY-MM-DD") : "请选择开始时间"
                }
              </DatePicker>
            </Form.Item>
            <Form.Item
              name="two"
              trigger="onConfirm"
              onClick={(e, datePickerRef: RefObject<DatePickerRef>) => {
                datePickerRef.current?.open();
              }}
            >
              <DatePicker>
                {(value) =>
                  value ? dayjs(value).format("YYYY-MM-DD") : "请选择结束时间"
                }
              </DatePicker>
            </Form.Item>
          </Form>
          <TextArea placeholder="请输入治疗过程" />
        </div>
        {/* 上传 */}
        <p style={{ padding: "0.2rem" }}>最多添加6张图片</p>
        <div className="maintwo">
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={mockUpload}
            multiple
            maxCount={6}
            showUpload={fileList.length < maxCount}
          />
        </div>
        {/* 按钮 */}
        <div className="mainthree">
          <div className="mainthree_one">
            <p style={{ padding: "0.2rem" }}>提升悬赏额度</p>
            <Switch />
          </div>
          <div className="mainthree_two">
            <Selector options={options} showCheckMark={false} />
          </div>
          <Button
            style={{ position: "absolute", bottom: "0" }}
            block
            color="primary"
            onClick={hangleButton}
          >
            提交
          </Button>
        </div>
      </div>
    </div>
  );
};

export default index;
